<template>
	<view>
		<canvas canvas-id="canvasID" id='canvasID' class="vw-100" style="height: 100vw;"></canvas>
		<view class="p-30 flex flex-x-space-between">
			<button class="btn-normal" open-type="share">
				<view class="flex flex-y-center box py-6 px-12 round-20">
					<uv-icon name='share' color="#4a54ff"></uv-icon>
					<text class="color-1 fs-14 pl-4">分享给好友</text>
				</view>
			</button>

			<view class="flex flex-y-center box-1  py-6 px-12 round-20" @click="down()">
				<uv-icon name='share' color="#f01480"></uv-icon>
				<text class="color-2 fs-14 pl-4">无水印下载</text>
			</view>
		</view>
		<view class="text-center py-20">
			<text class="fs-12" style="color: #2b85e4;">图片来自投稿,如有侵权请联系删除</text>
		</view>
	</view>
</template>

<script setup>
	import { ref, getCurrentInstance } from 'vue';
	import { onLoad, onReachBottom, onShareAppMessage } from '@dcloudio/uni-app'
	import { useUserStore, useRefs, useWebConfigStore } from '@/stores'
	import { $interstitialAd, $videoAd } from '@/utils/ad'
	import { $http } from '@/utils';
	const { USERINFO } = useRefs(useUserStore())
	const { WEBCONFIG } = useRefs(useWebConfigStore())
	const detail = ref()
	var ctx = null;
	onLoad((e) => {

		getDetail(e.id)
		// #ifdef MP-WEIXIN
		if (WEBCONFIG.value?.weixin_interstitial_status == '1') {
			$interstitialAd.init(WEBCONFIG.value?.weixin_interstitial_ad_id)
			$interstitialAd.show()
		}

		if (WEBCONFIG.value?.weixin_incentive_status == '1') {
			$videoAd.init(WEBCONFIG.value?.weixin_incentive_ad_id, (status) => {
				if (status && status.isEnded || status === undefined) {
					addNum(1)
					saveImage()
				} else {
					addNum(2)
					uni.showToast({
						title: '抱歉,未观看完无法获得奖励',
						icon: 'none'
					})
				}
			})
		}
		// #endif
		// #ifdef MP-TOUTIAO
		if (WEBCONFIG.value?.douyin_interstitial_status == '1') {
			$interstitialAd.init(WEBCONFIG.value?.douyin_interstitial_ad_id)
			$interstitialAd.show()
		}
		if (WEBCONFIG.value?.douyin_incentive_status == '1') {
			$videoAd.init(WEBCONFIG.value?.douyin_incentive_ad_id, (status) => {

				if (status && status.isEnded || status === undefined) {
					addNum(1)
					saveImage()
				} else {
					addNum(2)
					uni.showToast({
						title: '抱歉,未观看完无法获得奖励',
						icon: 'none'
					})
				}
			})
		}
		// #endif

	})

	const addNum = (e) => {
		$http.post('Num/num', { status: e })
	}

	const getDetail = (id) => {
		uni.showLoading({
			title: '获取资源中....'
		})
		$http.get('Avatar/getAvatarDetail', { id: id }).then(res => {
			detail.value = res.data
			init()
		})
	}

	const down = () => {
		// #ifdef MP-WEIXIN
		if (WEBCONFIG.value?.weixin_incentive_status == '1') {
			uni.showModal({
				title: '温馨提示',
				content: '观看广告获得资源',
				success(result) {
					if (result.confirm) {
						$videoAd.show()
					}
				}
			})
		} else {
			saveAlbum()
		}
		// #endif
		// #ifdef MP-TOUTIAO
		if (WEBCONFIG.value?.douyin_incentive_status == '1') {
			uni.showModal({
				title: '温馨提示',
				content: '观看广告获得资源',
				success(result) {
					if (result.confirm) {
						$videoAd.show()
					}
				}
			})
		} else {
			saveAlbum()
		}
		// #endif
	}


	const saveImage = () => {
		uni.downloadFile({
			url: detail.value.image,
			success(res) {
				uni.saveImageToPhotosAlbum({
					filePath: res.tempFilePath,
					success(e) {
						uni.showToast({
							title: '保存成功'
						})
					}
				})
			}
		})
	}


	const saveAlbum = () => {
		uni.getSetting({
			success: (res) => {
				// #ifdef MP-WEIXIN
				if (res.authSetting['scope.writePhotosAlbum']) {
					saveImage()
					return
				}
				// #endif

				// #ifdef MP-TOUTIAO
				if (res.authSetting['scope.album'] || res.authSetting['scope.album'] ==
					undefined) {
					saveImage()
					return
				}
				// #endif
				uni.authorize({ //如果没有授权，向用户发起请求
					// #ifdef MP-WEIXIN
					scope: 'scope.writePhotosAlbum',
					// #endif
					// #ifdef MP-TOUTIAO
					scope: 'scope.album',
					// #endif
					success: () => {
						saveImage();
					},
					fail: () => {
						uni.showModal({
							content: '检测到您没打开保存图片的权限，是否去设置打开？',
							confirmText: "确认",
							cancelText: '取消',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({
										success: (res) => {
											console.log(res);
										}
									})
								} else {
									uni.showToast({
										title: '保存失败',
										icon: 'none'
									})
									return false;
								}
							}
						})
					}
				})
			}
		})
	}

	const init = () => {
		uni.showLoading({
			title: '获取资源中....'
		})
		ctx = uni.createCanvasContext('canvasID', getCurrentInstance())
		const width = uni.getSystemInfoSync().screenWidth
		uni.getImageInfo({
			src: detail.value.image,
			success(res) {
				ctx.drawImage(res.path, 0, 0, width, width)
				ctx.save()
				ctx.setFontSize(14)
				ctx.setFillStyle("rgba(255,255,255,0.6)")
				ctx.setTextBaseline('middle')
				ctx.setTextAlign('center')
				var angle = Math.atan2(width, width);
				ctx.translate(0, width * -1)
				ctx.rotate(angle);
				let row = (Math.ceil(width / 60)) * 2
				console.log(row)
				for (let i = 0; i < row; i++) {
					for (let j = 0; j < row; j++) {
						ctx.fillText('观看视频下载', (i * 100), (j * 60))
					}
				}
				ctx.restore();
				ctx.draw();
				uni.hideLoading()
			}
		})
	}
 

	onShareAppMessage(() => {
		let id = USERINFO.value.id || 0
		return {
			title: detail.value.name + ' 姓氏头像',
			path: 'pages/avatar/avatar?id=' + id,
			imageUrl: detail.value.image
		}
	})
</script>

<style scoped>
	.box {
		border: 2rpx solid #4a54ff;
	}

	.color-1 {
		color: #4a54ff;
	}

	.box-1 {
		border: 2rpx solid #f01480;
	}

	.color-2 {
		color: #f01480;
	}
</style>